articles

Home / DeveloperSection / Articles / how to create message alert box using jquery

how to create message alert box using jquery

Anonymous User 2073 08-Jun-2018

Introduction:

In this article we are going give an example of alert message box or how to use confirm message box using jQuery with example.

Description:

The alert.js use to show mobile-friendly popup boxes.

alert.js is a lightweight jQuery/Zepto plugin used to create cross-browser, mobile-friendly popup boxes that meet all your needs about confirm/alert dialogs and toast-style notifications.

Click here to download it.

Let’s see an example of alert.js:

  <!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>jQuery alert.js Demos</title>
    <script src="//code.jquery.com/jquery.min.js"></script>
    <script src="alert.min.js"></script>
    <style>
        p {
            font-size: 14px;
            line-height: 16px;
            color: #777;
        }

        body {
            background-color: #F7F7F7;
            font-family: 'Roboto';
        }

        .hide {
            visibility: hidden;
            height: 0;
            width: 0;
        }

        code {
            overflow: auto !important;
        }

        pre {
            padding: 1px !important;
            width: 100%;
        }

        .btn {
            border: 1px solid #ccc;
            color: #666;
            display: inline-block;
            padding: 3px 6px;
            cursor: pointer;
            font-size: 14px;
        }

            .btn:hover {
                border-color: #aaa;
                color: #333;
            }

        .new:before {
            content: 'New';
            color: red;
            text-shadow: 0 0 5px yellow;
            font-weight: bold;
            padding: 0 5px;
        }

        .container {
            margin-top: 70px;
        }
    </style>

</head>
<body>

    <div class="btn" onclick="alert()">Alert Dialog</div>
    <div class="btn" onclick="confirm()">Confirm Dialog</div>
    <div class="btn new" onclick="confirmNew()">Close When Click On Cancel Button.</div>
    <div class="btn new" onclick="ToastMessage()">Toast Message</div>
    <script>
        var alert = function () {
            $.alert('This is an alert message', function (a) { $.alert('You clicked confirm') })
        }
        var confirm = function () {
            $.confirm('This is a confirmation message',
                function (a) {
                    $.alert('You just clicked' + (a ? 'Okey' : 'Cancel')
                        )
                })
        };
        var confirmNew = function () {
            $.confirm('The dialog CANNOT be closed.', function (e) {
                if (!e) return;
                this.find('.alert_content').html('The dialog CANNOT be closed untile you click CANCEL button.');
                return false;
            })
        }
        var ToastMessage = function ()
        {
            var showdef = Math.random() > 0.5;
            $.tips(showdef ? 'Auto close after 2 seconds if no duration is specified.'
                : 'This is a toast message that auto hides after 5 seconds',
                showdef ? 50000 : 50000)
        }
    </script>
</body>
</html>

 Output:

how to create message alert box using jquery

 I hope this article will help to you after reading.



Updated 20-Dec-2019
I am a content writter !

Leave Comment

Comments

Liked By